<template>
  <div class="addStatute">
    <h1
      style="
        font-weight: 700;
        font-style: normal;
        font-size: 24px;
        color: #344563;
      "
    >
      添加人员
    </h1>
    <el-form ref="form" :model="formAdd" label-width="80px" class="formtable">
      <el-form-item label="姓名">
        <el-input
          v-model="formAdd.pname"
          placeholder="请输入人员姓名"
          class="nameInp"
        ></el-input>
      </el-form-item>
      <el-form-item label="部门">
        <el-select v-model="formAdd.pdeptId" placeholder="请选择部门">
          <el-option
            :key="v.pdeptId"
            v-for="v in pdeptList"
            :label="v.pdept"
            :value="v.pdeptId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工种">
        <el-select v-model="formAdd.pjobId" placeholder="请选择工种">
          <el-option
            :key="v.pjobId"
            v-for="v in pjobList"
            :label="v.pjob"
            :value="v.pjobId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工种等级">
        <el-select v-model="formAdd.pclassId" placeholder="请选择工种等级">
          <el-option
            :key="v.pclassId"
            v-for="v in pclassList"
            :label="v.pclass"
            :value="v.pclassId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
        formAdd:{
        pdeptId:'',
        pjobId:'',
        pclassId:'',
        pname:'',
        },
        pdeptList: [],
      pjobList: [],
      pclassList:[],
    };
  },
  methods: {
    onSubmit:function() {
      console.log(this.formAdd);
      this.$axios({
        url:'personal/add',
        method:'post',
        data:{
          pname:this.formAdd.pname,
          personalDept:{pdeptId:this.formAdd.pdeptId},
          personalClass:{pclassId:this.formAdd.pclassId},
          personalJob:{pjobId:this.formAdd.pjobId},
          // id:this.formAdd.id
        }
      }).then(({data})=>{
        console.log(data)
        if(data.msg=='一切ok'){
          this.$message.success('添加成功')
          this.$router.push('/home/Ryxx')
        }else{
          this.$message.error('添加失败')
        }

      })
      },
      cancel:function(){
        this.$router.push('/home/Ryxx')
      },
    pdept_type: function () {
      this.$axios({
        url: "/personal/pdept",
        method: "get",
      }).then(({ data }) => {
        this.pdeptList = data.data;
      });
    },
    job_type: function () {
      this.$axios({
        url: "/personal/pjob",
        method: "get",
      }).then(({ data }) => {
        // console.log(data)
        this.pjobList = data.data;
      });
    },
    class_type: function () {
      this.$axios({
        url: "/personal/pclass",
        method: "get",
      }).then(({ data }) => {
        // console.log(data)
        this.pclassList = data.data;
      });
    },
  },
  mounted: function () {
    this.pdept_type();
    this.job_type();
    this.class_type();
  },
};
</script>
<style lang="less"  scoped>
.addStatute {
  padding: 30px;
}
.formtable {
  margin-top: 50px;
}
.nameInp {
  width: 217px;
}
</style>